<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { useMessage } from 'naive-ui'
import { deleteQuestion } from '../api/question'
import { CheckCircle } from '@vicons/fa'

const props = defineProps({
    question: {
        id: Number,
        title: String,
        isTop: Boolean,
        essential: Boolean,
        answerCount: Number,
        viewCount: Number,
        createTime: Date,
        username: String,
        account: String,
        questioner: Number,
        tags: Object,
        isSolved: false,
    },
    userState: Boolean,
})
const router = useRouter()
const message = useMessage()
const showModal = ref(false)
const cancelCallback = () => {
    message.info('想好再点！')
}
const submitCallback = () => {
    deleteQuestion(props.question.id).then(res => {
        if (res.code === '204') {
            message.success('已删除！')
            router.push('/')
        } else {
            message.error(res.message)
        }
    })
}

const handleClickCreator = () => {
    router.push({
        name: 'User',
        params: { id: props.question.questioner },
    })
}
</script>

<template>
    <div class="wrapper">
        <n-avatar
            :round="true"
            :size="48"
            :style="{color: 'white', backgroundColor: 'orange', fontSize: '24px'}"
        >{{ question.username.toString().substring(0, 1) }}
        </n-avatar>
        <div class="media-body">
            <div class="title-container">
                <div class="left">
                    <router-link :to="{ name: 'Detail', params: { id: question.id }}">
                        <span class="title">{{ question.title }}</span>
                    </router-link>
                    <n-tag v-if="question.isTop" :bordered="false"
                           style="float:right; font-weight: 600; border-radius: 0.3vw; margin-right: 1vw;"
                           type="error">
                        置顶
                    </n-tag>
                    <n-tag v-if="question.essential" :bordered="false" style="font-weight: 600; border-radius: 0.3vw"
                           type="info">
                        精华
                    </n-tag>
                </div>
                <n-space size="small">
                    <n-tag v-if="question.isSolved" :bordered="false"
                           :color="{ color: '#6dbb3e', textColor: '#fff', borderColor: '#00965e' }"
                           style="float:right; font-weight: 600; border-radius: 0.3vw">
                        <template #avatar>
                            <n-icon>
                                <check-circle/>
                            </n-icon>
                        </template>
                        已解决
                    </n-tag>
                    <n-space v-if="userState" size="small">
                        <router-link :to="{ name: 'EditQuestion', params: {id: question.id}}">
                            <n-button size="small" type="warning">编辑</n-button>
                        </router-link>
                        <n-button size="small" type="error" @click="showModal = true">删除</n-button>
                        <n-modal
                            v-model:show="showModal"
                            content="你确定?"
                            negative-text="算了"
                            positive-text="确认"
                            preset="dialog"
                            title="确认"
                            @positive-click="submitCallback"
                            @negative-click="cancelCallback"
                        />
                    </n-space>
                </n-space>
            </div>
            <div class="other">
                <n-space justify="space-between">
                    <n-text class="creator" depth="3" @click="handleClickCreator">{{ question.username }}</n-text>
                    <n-text class="datetime" depth="3">发布于 {{
                            $dayjs(question.createTime).format('YYYY-MM-DD HH:mm:ss')
                        }}
                    </n-text>
                    <n-tag v-if="question.reward"
                           :color="{ color: '#f0c560', textColor: '#fff', borderColor: '#f0c560' }" :round="true"
                           size="small">
                        ￥{{ question.reward }}
                    </n-tag>
                    <n-tag v-for="tag in question.tags" :bordered="false" :round="true" size="small" type="primary">
                        {{ tag.name }}
                    </n-tag>
                </n-space>
                <n-space size="small">
                    浏览<span class="star_count">{{ question.viewCount }}</span>
                    <span class="separator">|</span>回答<span class="answer_count">{{ question.answerCount }}</span>
                </n-space>
            </div>
        </div>
    </div>
</template>

<style scoped>
.wrapper img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 25px;
}

.wrapper {
    display: flex;
    border-bottom: solid 1px #eeeeee;
    padding: 2% 0;
}

.media-body {
    flex: 1;
    margin-left: 1vw;
}

.media-body .title {
    font-size: 18px;
    margin-right: 0.5vw;
    max-width: 300px;
}

.other {
    font-size: 12px;
    color: #6c757d;
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title:hover, .creator:hover {
    cursor: pointer;
    color: #18a058;
}

.title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-container .left {
    flex: 1;
    max-width: 30vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
</style>
